<template>
    <div>
        <!-- 查询 -->
        <div>
            <el-form :inline="true" :v-model="formInline" class="demo-form-inline">
                <el-form-item label="名称:">
                    <el-input v-model="formInline.productName" placeholder="商品名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="型号:">
                    <el-input v-model="formInline.model" placeholder="商品型号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="颜色:">
                    <el-input v-model="formInline.colour" placeholder="商品颜色" size="small"></el-input>
                </el-form-item>
                <el-form-item label="类型:">
                    <el-input v-model="formInline.types" placeholder="商品类型" size="small"></el-input>
                </el-form-item>
                <el-form-item label="序列号:">
                    <el-input v-model="formInline.serialNumber" placeholder="商品序列号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="条码:">
                    <el-input v-model="formInline.barcode" placeholder="商品条码" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="queryList" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="primary" icon="el-icon-plus" @click="showEditDialog" size="small">添加</el-button>
            <!-- <el-button type="primary" icon="el-icon-bottom" size="small">导入</el-button>
            <el-button type="primary" icon="el-icon-top" size="small">导出</el-button> -->
            <el-button type="primary" v-show="deleteMore" icon="el-icon-delete-solid" @click="deleteMoreBotton" size="small">批量删除</el-button>
        </div>
        <!-- 表格 max-height="390" tooltip-effect="dark"-->
        <div>
            <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column fixed prop="id" label="#" width="120"/>
                <el-table-column fixed prop="productName" label="商品名" width="120"/>
                <el-table-column prop="unitList.basicUnit" label="单位" width="120"/>
                <el-table-column prop="model" label="型号" width="120"/>
                <el-table-column prop="specification" label="规格" width="120"/>
                <el-table-column prop="colour" label="颜色" width="120"/>
                <el-table-column prop="erpCommoditystyle.classificationName" label="类型" width="120"/>
                <el-table-column prop="serialNumber" label="序列号" width="120"/>
                <el-table-column prop="barcode" label="条码" show-overflow-tooltip/>
                <el-table-column prop="purchasePrice" label="采购价" width="120"/>
                <el-table-column prop="sellingPrice" label="销售价" width="120"/>
                <el-table-column prop="num" label="数量" width="120"/>
                <el-table-column prop="extendedInformation" label="扩展信息" width="120"/>
                <el-table-column prop="lowestPrice" label="最低售价" width="120"/>
                <el-table-column label="是否销售" prop="status">
                    <template scope="scope">
                    <!-- 作用域插槽 -->
                        <!-- {{scope.row}}每一行封装的数据，取出状态码 -->
                        <el-switch v-model="scope.row.status" 
                        :active-value="1"
                        :inactive-value="0"
                        @change="statusIS(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column label="是否入库" prop="status2">
                    <!-- 作用域插槽 -->
                    <template slot-scope="scope">
                        <!-- {{scope.row}}每一行封装的数据，取出状态码 -->
                        <el-switch v-model="scope.row.status2"
                        :active-value="1"
                        :inactive-value="0"
                        @change="statusIS2(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
                        <!-- 删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page
            @on-change="queryList"
            :total="total"
            show-total
            :page-size="pageSize"
            style="float:right"/>
            <!-- 修改商品信息 -->
            <div style="width: 100%">
                <el-dialog :title="uORiText" width="80%" :visible.sync="updateFormVisible" :before-close="handleClose">
                    <el-form :v-model="updateform" :inline="true" >
                        <el-form-item label="商品名称" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.productName" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="单位" style="margin: 0 0 30px 30px;">
                            <!-- <el-input v-model="updateform.unit" autocomplete="off" size="medium"/> -->
                            <el-select v-model="updateform.unit" placeholder="请选择商品单位" size="medium">
                                <el-option 
                                v-for="item in unitSelect" 
                                :key="item.id" 
                                :label="item.deputyUnit" 
                                :value="item.id"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.model" autocomplete="off" size="medium" disabled/>
                        </el-form-item>
                        <el-form-item label="商品编号" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.specification" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="规格" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.specification" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="颜色" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.colour" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="类型" style="margin: 0 0 30px 30px;">
                            <el-select v-model="updateform.types" placeholder="请选择商品类型" size="medium">
                                <el-option 
                                v-for="item in styleSelect" 
                                :key="item.id" 
                                :label="item.classificationName" 
                                :value="item.id"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="条码" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.barcode" autocomplete="off" size="medium" disabled/>
                        </el-form-item>
                        <el-form-item label="序列号" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.serialNumber" autocomplete="off" size="medium" disabled/>
                        </el-form-item>
                        <el-form-item label="采购价" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.purchasePrice" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="销售价" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.sellingPrice" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="最低价" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.lowestPrice" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="数量" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.num" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item v-show="uORiText=='添加'?false:true" label="是否销售" style="margin: 0 0 30px 30px;">
                            <el-select v-model="updateform.status" placeholder="是否销售" size="medium">
                                <el-option 
                                v-for="item in statusTwo" 
                                :key="item.value" 
                                :label="item.label" 
                                :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="uORiText=='添加'?false:true" label="是否入库" style="margin: 0 0 30px 30px;">
                            <el-select v-model="updateform.status2" placeholder="是否入库" size="medium">
                                <el-option 
                                v-for="item in statusTwo" 
                                :key="item.value" 
                                :label="item.label" 
                                :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="扩展信息" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.extendedInformation" autocomplete="off" size="medium"/>
                        </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertUpdateForm">确 定</el-button>
                </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
      return {
        // 多条删除
        deleteMore: false,
        // 条件查询
        formInline: {
          productName: '',
          model:'',
          colour: '',
          types:'',
          serialNumber: '',
          barcode:'',
        },
        // 表格数据
        tableData:[],
        multipleSelection: [],
        multipleSelection1: [],
        loading: false,
        switch_value: false,
        total: 0,
        pageSize: 6,
        currentPage: 0,
        updateFormVisible: false,
        updateform:{
            id:'',
            productName:'',
            unit:'',
            model:'',
            specification:'',
            colour:'',
            types:'',
            serialNumber:'',
            barcode:'',
            purchasePrice:'',
            sellingPrice:'',
            lowestPrice:'',
            num:'',
            status:'',
            status2:'',
            extendedInformation:'',
        },
        updateORinsert:'',
        styleSelect: [],
        unitSelect: [],
        uORiText: '',
        statusTwo:[
            {value:1, label:'是'},
            {value:0, label:'否'}
        ],
      }
    },
    created(){
        this.queryList();
    },
    methods: {
        // 所有商品信息 -- 页数的回调
        async queryList(currentPage){
            this.loading=true;
            if(currentPage!=null){
                if(isNaN(currentPage)){
                    this.currentPage = 1;
                }else{
                    this.currentPage = parseInt(currentPage);
                }
            }else{
                this.currentPage = 1;
            }
            axios.get("http://localhost:8082/commodity/getCommodityAll?productName="+this.formInline.productName+"&model="+
            this.formInline.model+"&colour="+this.formInline.colour+"&types="+this.formInline.types+
            "&serialNumber="+this.formInline.serialNumber+"&barcode="+this.formInline.barcode+"&index="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{          
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.loading=false;
                console.log(this.tableData)
            })
        },
        // 批量删除
        handleSelectionChange(rows) {
            this.deleteMore=true;
            this.multipleSelection1 = rows;
            this.multipleSelection = [];
            this.multipleSelection1.forEach(e=>{
                this.multipleSelection.push(e.id);
            })
            // console.log(this.multipleSelection)
      },
      deleteMoreBotton(){
          axios.post("http://localhost:8082/commodity/deleteMoreComm",this.multipleSelection).then(res=>{
            //   console.log("批量删除"+res)
                if(res!='ok'){
                    this.queryList(1);
                    this.$message.success("删除成功");
                }else{
                    this.$message.error("删除失败");
                }
            })
      },
      // 添加、修改
      showEditDialog(row){
        // 类型值
        axios.get("http://localhost:8082/commodity/getCommoND").then(res=>{
            this.styleSelect=res.data;
            console.log(this.styleSelect)

        })
        // 计量单位
        axios.get("http://localhost:8082/commodity/getUnitAll").then(res=>{
            // console.log('计量单位：'+res);
            this.unitSelect=res.data;
        })
          this.updateFormVisible=true
          if(row.id!=null){
              this.updateORinsert = '0';
              this.uORiText = '修改';
              this.updateform.id=row.id;
              this.updateform.productName=row.productName;
              this.updateform.unit = Number(row.unit);
              this.updateform.model = row.model;
              this.updateform.specification = row.specification;
              this.updateform.colour = row.colour;
              this.updateform.types = Number(row.types);
              this.updateform.serialNumber = row.serialNumber;
              this.updateform.barcode = row.barcode;
              this.updateform.purchasePrice = row.purchasePrice;
              this.updateform.sellingPrice = row.sellingPrice;
              this.updateform.lowestPrice = row.lowestPrice;
              this.updateform.num = row.num;
              this.updateform.status = Number(row.status);
              this.updateform.status2 = Number(row.status2);
              this.updateform.extendedInformation = row.extendedInformation;
          }else{
              this.updateORinsert = '1';
              this.uORiText = '添加';
              this.updateform = {};
            // 条码、商品型号、序列号
            // *************
              this.updateform.barcode = ''+new Date().getFullYear()+Math.floor(Math.random() * 10000)
            //、商品规格   this.updateform.specification = 'SG'+new Date().getFullYear()+Math.floor(Math.random() * 10000)
              this.updateform.model = 'SX'+new Date().getFullYear()+Math.floor(Math.random() * 10000)
              this.updateform.serialNumber = ''+new Date().getFullYear()+Math.floor(Math.random() * 10000)

          }
      },
      // 添加、修改保存
      insertUpdateForm(){
          if(this.updateORinsert=='1'){
              axios.post("http://localhost:8082/commodity/insertComm",this.updateform).then(res=>{
                  console.log(res)
                  if(res.data=='ok'){
                      this.updateFormVisible = false;
                      this.$message.success("添加成功");
                  }else{
                      this.updateFormVisible = false;
                      this.$message.error("添加失败");
                  }
              })
          }else{
              axios.post("http://localhost:8082/commodity/updateCom",this.updateform).then(res=>{
                  if(res.data=='ok'){
                      this.updateFormVisible = false;
                      this.$message.success("修改成功");
                  }else{
                      this.updateFormVisible = false;
                      this.$message.error("修改失败");
                  }
              })
          }
      },
       //   关闭对话框
       handleClose() {
           this.updateFormVisible = false;
       },
      // 删除
      deleteUser(row){
          axios.get("http://localhost:8082/commodity/deleteCommodity?id="+row).then(res=>{
              if(res.data=="ok"){
                  this.$message.success("删除成功");
                  return this.queryList();
              }
              this.$message.error("删除失败");
          })
      },
      //是否销售状态修改 -- 开关
      statusIS(row){
          console.log(row)
          axios.post("http://localhost:8082/commodity/updateIsSell",row).then(res=>{
              if(res!="ok"){
                  this.$message.success("修改成功");
                  return this.queryList();
              }
              this.$message.error("修改失败");
          })
      },
      //是否入库状态修改 -- 开关
      statusIS2(row){
          console.log(row)
          axios.post("http://localhost:8082/commodity/updateIsCome",row).then(res=>{
              if(res!="ok"){
                  this.$message.success("修改成功");
                  return this.queryList();
              }
              this.$message.error("修改失败");
          })
      },
    }
  }
</script>
<style lang="less" scoped>

</style>